<template>
  <!-- 表格 -->
  <my-table
    :tableData="tableData"
    :propList="propList"
    v-model:pagination="pagination"
    :tableLoading="tableLoading"
    :hasSearch="false"
    :hasAction="false"
    @updateTableData="refreshTable"
  >
    <template #isDispose="{ row }">
      <el-switch
        v-model="row.isDispose"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="已回复"
        inactive-text="未回复"
        @change="useChane(row.isDispose, row._id)"
      >
      </el-switch>
    </template>
    <template #tableAction><el-button type="success" @click="handleAdd">新增</el-button></template>
    <template #action="{ row }">
      <el-button type="primary" @click="handleView(row)">查看</el-button>
    </template>
  </my-table>
  <!-- banner弹窗 -->
  <!-- 弹框 -->
  <el-dialog title="查看详情" v-model="dialogFormVisible" class="dialog-box">
    <el-row :gutter="20" class="elRow">
      <el-col :span="6"> 姓名： </el-col>
      <el-col :span="12"> {{ dialogData.name }} </el-col>
    </el-row>
    <el-row :gutter="20" class="elRow">
      <el-col :span="6"> 手机号码： </el-col>
      <el-col :span="12"> {{ dialogData.phone }} </el-col>
    </el-row>
    <el-row :gutter="20" class="elRow">
      <el-col :span="6"> 申请内容：</el-col>
      <el-col :span="16">
        {{ dialogData.resource }}
      </el-col>
    </el-row>
    <el-row :gutter="20" class="elRow">
      <el-col :span="6"> 是否已回复： </el-col>
      <el-col :span="12" class="elRow">
        {{ dialogData.isDispose ? '已回复' : '未回复' }}
      </el-col>
    </el-row>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getApplicationList, changeIsDispose } from '@/api/application'
import useTable from '@/hooks/useTable'
defineOptions({ name: 'ApplicationIndex' })
// 定义表格属性
const propList = ref([
  { prop: 'name', label: '姓名' },
  { prop: 'phone', label: '手机号码' },
  { prop: 'resource', label: '申请简要内容' },
  { label: '是否已回复', slotName: 'isDispose' },
  { prop: 'date', label: '日期' },
  { label: '操作', slotName: 'action', width: '300' }
])
// 获取表格列表
const { tableData, tableLoading, pagination, refreshTable } = useTable(getApplicationList)

// 切换启用状态
const useChane = async (isDispose, id) => {
  try {
    await changeIsDispose({
      id,
      isDispose
    })
    refreshTable()
  } catch (error) {
    console.log('error: ', error)
  }
}
// 查看弹窗
const dialogFormVisible = ref(false)
const dialogData = ref({})
const handleView = (row) => {
  dialogData.value = row
  dialogFormVisible.value = true
}
</script>

<style lang="scss" scoped>
.dialog-box {
  text-align: center;
  .el-col {
    margin-bottom: 10px;
  }
}
</style>
